<template>
  <div class="main">
    <div style="padding: 10px">
      <van-cell is-link :to="'/me/account/'" center>
        <div style="display: flex">
          <van-image
            round
            width="60"
            height="60"
            :src="base + '/file/image/' + user.avatar"
          />
          <div class="des">
            <div class="des-name">{{ user.nickname }}</div>
          </div>
        </div>
      </van-cell>
    </div>
    <div class="card">
      <div class="card-title">我的文章</div>
      <div class="card-item">
        <div span="8" class="card-title">
          <div style="white-space: nowrap">已提交</div>
          <div>{{ checker0 + checker1 + checker2 }}篇</div>
        </div>
        <div span="8" class="card-title">
          <div style="white-space: nowrap">待审核</div>
          <div>{{ checker0 }}篇</div>
        </div>
        <div span="8" class="card-title">
          <div style="white-space: nowrap">审核通过</div>
          <div>{{ checker1 }}篇</div>
        </div>
        <div span="8" class="card-title">
          <div style="white-space: nowrap">审核未通过</div>
          <div>{{ checker2 }}篇</div>
        </div>
      </div>
    </div>

    <!-- 文章显示开始 -->
    <div class="carda" v-if="articleList == '' ? false : true">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <div style="margin-bottom: 66px">
          <ArticleList :list="articleList" />
        </div>
      </van-pull-refresh>
    </div>
    <!-- 文章显示结束 -->
  </div>
</template>

<script>
import { BASE_RUL } from "@/utils/request";
import ArticleList from "@/components/ArticleList";
import { FindArticleByUid, FindArticleById } from "@/api/article";

export default {
  components: { ArticleList },

  data() {
    return {
      base: BASE_RUL,
      user: JSON.parse(localStorage.getItem("user")),
      articleList: [],
      isLoading: false,
      checker1: 0,
      checker2: 0,
      checker0: 0,
    };
  },

  mounted() {
    const temp = this.user.id;
    FindArticleByUid(temp).then((res) => {
      if (res.status) {
        this.articleList = res.data;
        for (let obj in res.data) {
          const check = res.data[obj]["article"]["checker"];
          if (check == "0") this.checker0++;
          else if (check == "1") this.checker1++;
          else this.checker2++;
        }
      }
    });
    this.$forceUpdate();
  },

  methods: {
    onRefresh() {
      FindArticleByUid(this.user.id).then((res) => {
        if (res.status) {
          this.checker1=0;
          this.checker2=0;
          this.checker0=0;
          this.articleList = res.data;
          for (let obj in res.data) {
            const check = res.data[obj]["article"]["checker"];
            if (check == "0") this.checker0++;
            else if (check == "1") this.checker1++;
            else this.checker2++;
          }
          this.$forceUpdate();
        }
      });
      setTimeout(() => {
        this.$toast("刷新成功");
        this.isLoading = false;
        this.count++;
      }, 1000);
    },
    onClick() {
      const temp = this.user.id;
      FindArticleByUid(temp).then((res) => {
        if (res.status) {
          this.articleList = res.data;
        }
      });
    },
  },
};
</script>

<style scoped>
.butt {
  float: right;
  color: aliceblue;
  background-color: #81f7d8;
  text-align: center;
  border-radius: 3px;
  border: #81f7d8;
  font-weight: 700;
}
.van-tabs__line {
  width: 20px;
  background-color: #81f7d8;
}

.d {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2px;
  color: rgba(0, 0, 0, 0.5);
  text-align: center;
}
.card {
  width: 100%;
  height: 100%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  margin-top: 0px;
  letter-spacing: 1px;
}
.carda {
  width: 100%;
  height: 100%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  margin-top: 20px;
  letter-spacing: 1px;
  background: #f5f6f7;
}

.card-title {
  font-size: 15px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.7);
  padding-left: 12px;
  padding-right: 10px;
  padding-top: 12px;
  padding-bottom: 10px;
  text-align: center;
}

.card-item {
  font-size: 18px;

  display: flex;
}

.card-d1 {
  font-size: 11px;
  padding-top: 5px;
  color: rgba(0, 0, 0, 0.8);
  text-align: center;
}

.main {
  padding: 20px;
}

.des {
  padding-left: 20px;
  letter-spacing: 1px;
  padding-top: 18px;
}

.des-name {
  font-size: 18px;
  padding-left: 3px;
}

.author-des {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.6);
  padding-left: 2px;
}
</style>